<template>
  <div class="app-container" style="padding-top: 5px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="height: 45px;">

      <el-form-item label="建设项目" prop="projectId">
        <el-select
          v-model="queryParams.projectId"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleProjectChange"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.projectId"
            :value="item.projectId"
            :label="item.projectName"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="期　　次" prop="periodName">
        <el-select v-model="queryParams.periodName" placeholder="请选择" @change="handlePeriodChange">
          <el-option
            v-for="item in periodOptions"
            :key="item.periodName"
            :label="item.periodName"
            :value="item.periodName">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <i-frame :src="reportUrl"/>

  </div>
</template>

<script>

import { initProjectView } from "@/api/engineering/report";
import { dropDownProjectReportPeriodList } from "@/api/project/period";
import iFrame from "@/components/iFrame/index";
import { getSummaryRecordIsApproveByProjectId} from "@/api/engineering/summary";

export default {
  name: "ProjectReportView",
  components: { iFrame },
  data() {
    return {
      // 查询参数
      queryParams: {
        reportUrl: null,
        projectId: null,
        periodName: null
      },
      // 项目下拉框
      projectOptions:[],
      // 工期下拉框
      periodOptions: [],
      reportUrl: ""
    };
  },
  created() {
    document.title = this.$route.query.reportName;
    this.queryParams.reportUrl = this.$route.query.reportUrl;
    this.queryParams.projectId = this.$route.query.projectId;
    this.queryParams.periodName = this.$route.query.periodName;
    this.init();
  },
  methods: {
    /** 初始化标段下拉框 */
    init() {
      initProjectView({
        projectId: this.queryParams.projectId,
        periodName: this.queryParams.periodName,
        reportType: this.reportType}).then(response => {
        this.projectOptions = response.projects;
        this.queryParams.projectId = response.projectId;
        this.periodOptions = response.periods;
        this.queryParams.periodName = response.periodName;
        this.loadReport();
      });
    },
    /** 获取工期下拉框 */
    getPeriodList() {
      dropDownProjectReportPeriodList({projectId: this.queryParams.projectId}).then(response => {
        this.periodOptions = response.periods;
      });
    },
    // 项目下拉框发生变化
    handleProjectChange() {
      this.queryParams.periodName = null;
      this.periodOptions = [];
      this.getPeriodList();
      this.loadReport();
    },
    // 工期下拉框发生变化
    handlePeriodChange() {
      this.loadReport();
    },
    // 加载报表
    loadReport() {
      let url = "";
      if (this.queryParams.projectId == undefined || this.queryParams.periodName == undefined) {
        this.reportUrl = url;
      } else {
        // 加载前获取是否批复
        getSummaryRecordIsApproveByProjectId({
          projectId: this.queryParams.projectId,
          periodName: this.queryParams.periodName,
          user: this.queryParams.user}).then(response => {
          let isApprove = response.isApprove;
          url = this.queryParams.reportUrl
            + "&projectId=" + this.queryParams.projectId
            + "&periodName=" + this.queryParams.periodName
            + "&isApprove=" + isApprove;
          console.log("报表地址：" + url);
          this.reportUrl = url;
        });
      }
    }

  }
};
</script>
